<template>
	<div class="oneMain">
		<div class="tools">
			<div>
				<el-form :inline="true" :model="search" size="small">
					<!-- <el-form-item>
						<el-input placeholder="输入用户组名称" v-model="search.content" class="input-with-select" @keyup.enter.native="refreshTable()">
							<el-button slot="append" icon="el-icon-search" v-on:click="refreshTable()"></el-button>
						</el-input>
					</el-form-item> -->
					<el-form-item>
						<el-button class="addBtn" size="small" @click="addOne" v-if="rootlist.add">添加</el-button>
						<el-button class="delBtn" size="small" @click="delectSome" v-if="firstType == 'selection' && rootlist.delete">删除
						</el-button>
						<el-button class="editBtn" size="small" @click="changeEdit" v-if="rootlist.add || rootlist.update || rootlist.delete">{{ toolsTitle }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div>
				<el-button icon="el-icon-refresh" size="small" class="btn refBtn btnRight" @click="refreshTable"></el-button>
			</div>
		</div>
		<div class="tableContent">
			<el-table ref="table" height="679" :data="tableData" tooltip-effect="light" size="small" v-loading="loading" class="table"
			 @selection-change="changeSelect">
				<el-table-column type="index" label="序号" width="70" :resizable="false" key="indexOOO" v-if="firstType == 'index'"></el-table-column>
				<el-table-column type="selection" label="序号" width="70" :resizable="false" key="select000" v-if="firstType == 'selection'"></el-table-column>
				<el-table-column prop="name" label="目标" min-width="100" key="name"></el-table-column>
				<el-table-column prop="percentage" label="进度" min-width="150" key="precentage">
					<template slot-scope="scope">
						<el-progress :percentage="scope.row.percentage" :color="customColors"></el-progress>
					</template>
				</el-table-column>
				<el-table-column prop="checkTime" label="扫描开始时间" min-width="150" key="checkTime" align="center">
				</el-table-column>
				<!-- <el-table-column prop="level" label="严重级别" min-width="150" key="level"></el-table-column> -->
				<!-- <el-table-column v-for="(item,key) in tableCloumn" :prop="item.prop" :key="key" :resizable="false" :label="item.label"
				 :min-width="item.width" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{getDisplay(scope)}}
					</template>
				</el-table-column> -->
				<el-table-column label="操作" key="editUpdate" min-width="100" align="center">
					<!--v-if="firstType=='selection'" fixed="right"-->
					<!-- :disabled="scope.row" percentage-->
					<template slot-scope="scope">
						<el-button class="udpBtn" type="text" size="mini" @click="start(scope.row)" :disabled="scope.row.percentage == 100 ? false : true">重新开始</el-button>
						<el-button class="optBtn" size="mini" @click="lookReport(scope.row)" :disabled="scope.row.percentage == 100 ? false : true">查看报告</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row class="page">
				<el-pagination @current-change="changePage" :current-page.sync="currentPage" :page-size.sync="pageSize" layout="prev, pager, next,jumper,->,total"
				 :total="total"></el-pagination>
			</el-row>
		</div>
		<el-dialog :visible.sync="editVisible" :close-on-click-modal="false" width="450px">
			<div slot="title">
				{{ editTitle + '任务' }}
			</div>
			<el-form ref="form" :model="form" :rules="formRule" label-width="110px" v-loading="e_loading" size="mini" class="form"
			 label-position="left" @submit.native.prevent>
				<el-form-item label="名称" prop="name">
					<el-input class="short-input" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="扫描目标" prop="target">
					<el-select v-model="form.target" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					<el-button type="success" icon="el-icon-plus" class="add" @click="addtarget()"></el-button>
				</el-form-item>
			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button type="primary" size="small" :disabled="submitDis" class="sureBtn" @click="submit_Edit('form')">确定</el-button>
				<el-button @click="editVisible = false" class="cancelBtn" size="small">取消</el-button>
			</div>
		</el-dialog>
		<add-target ref="showTarget"></add-target>
	</div>
</template>

<script>
	import tablePublic from '@/mixins/tablePublic'
	import systemEdit from '@/mixins/systemEdit'
	import addTarget from '@c/list/target'
	export default {
		components: {
			addTarget,
		},
		name: 'scanlist',
		mixins: [tablePublic, systemEdit],
		data() {
			return {
				deleteOneUrl: 'deleteTask',
				deleteUrl: 'deleteTask',
				search: {},
				tableUrl: 'getScanList',
				addUrl: 'createTaskByIp',
				//tableMethods:1,
				form: {
					name: '',
					target: '',
				},
				options: [],
				rootlist: {
					add: true,
					update: true,
					delete: true,
				},
				e_loading: '',
				formRule: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur',
					}, ],
					target: [{
						required: true,
						message: '请选择目标',
						trigger: 'change',
					}, ],
				},
				customColors: [{
						color: '#e6a23c',
						percentage: 40,
					},
					{
						color: '#1989fa',
						percentage: 80,
					},
					{
						color: '#5cb87a',
						percentage: 100,
					},
				],
			}
		},
		created() {
			this.getTargetList()
		},
		mounted() {
			this.$refs.showTarget.getPortList()
		},
		methods: {
			addtarget() {
				let _this = this
				_this.$refs.showTarget.showtarget()
				_this.$refs.showTarget.editTitle = '添加目标'
				setTimeout(() => {
					_this.$refs.showTarget.$refs.form.clearValidate()
					_this.$refs.showTarget.$refs.form.resetFields()
				}, 50)
			},
			//查看任务报表
			lookReport(row) {
				let _this = this
				_this.$router.push({
					path: '/scan/report',
					query: {
						taskId: row.taskId,
					},
				})
			},
			handleResultTableData(res) {
				let _this = this
				let data = res.list
				let taskIdList = new Array()
				let sss = 0
				data.forEach((item) => {
					let neg = /^\d{1,2}%$/
					if (item.status == '已完成') {
						item.percentage = 100
						taskIdList.push(item.taskId)
					} else if (item.status == '等待中') {
						item.percentage = 1
						setTimeout(() => {
							_this.getTableData()
						}, 15000)
					} else if (neg.test(item.status)) {
						let pre = item.status.substring(0, item.status.length - 1)
						item.percentage = parseInt(pre)
						sss++
					}
					item.level = ''
				})
				_this.tableData = data
				if (sss > 0) {
					setTimeout(() => {
						_this.getTableData()
					}, 15000)
				}
				//_this.getLevelById(taskIdList);
			},
			async getLevelById(list) {
				let _this = this
				let res = await _this.$api.postRequest(list, 'getReportByIds')
				if (res.code) {} else {
					res.forEach((item) => {
						let info = _this.tableData.find((one) => {
							return one.taskId == item.taskId
						})
						info.level = item.level
					})
				}
			},
			//修改/添加操作
			async editInfo() {
				let _this = this
				const msssg = _this.editVisible
				_this.loading = true
				let res = await _this.$api.postRequest(
					null,
					_this.addUrl,
					_this.form.name
				)
				_this.submitDis = false
				if (res.code) {
					_this.loading = false
				} else {
					_this.editVisible = false
					if (msssg) {
						let title = _this.editTitle
						_this.$message({
							message: title + '成功',
							type: 'success',
						})
					}
					_this.handleEditResult(1, res)
				}
			},
			async getTargetList() {
				let _this = this
				let param = {
					currentPage: '1',
					pageSize: 100000,
					entity: '',
				}
				let res = await _this.$api.postRequest(param, 'getTargetList')
				if (res.code) {
					_this.$message({
						message: '服务器端出错',
						type: 'warning',
					})
				} else {
					res.list.forEach((item) => {
						let param = {
							value: item.uuid,
							label: item.name,
						}
						this.options.push(param)
					})
				}
			},
			submit_Edit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.createTask()
						this.e_loading = true
					} else {
						return false
					}
				})
			},
			async createTask() {
				let _this = this
				let param = {
					name: _this.form.name,
					targetId: _this.form.target,
				}
				let res = await _this.$api.postRequest(param, 'createTask')
				if (res.code == 500) {
					this.$message({
						showClose: true,
						message: res.data.message,
						type: 'warning',
					})
					this.e_loading = false
				} else {
					this.$message({
						showClose: true,
						message: '新建任务成功',
						type: 'success',
					})
					this.e_loading = false
					this.getTableData()
					this.editVisible = false
				}
			},
			start(row) {
				this.startTask(row.taskId)
				this.loading = true
			},
			async startTask(param) {
				let _this = this
				let res = await _this.$api.getRequest(null, 'startTask', param)
				console.log(res)
				if (res.code == 1) {
					this.loading = false
					this.$message({
						showClose: true,
						message: res.data,
						type: 'success',
					})
				} else {
					this.loading = false
					this.$message({
						showClose: true,
						message: res,
						type: 'success',
					})
					this.getTableData()
				}
			},
		},
	}
</script>

<style lang="scss">
	$background: #fff;

	.add {
		padding: 4px 4px;
		font-size: 13px;
		border-radius: 3px;
		margin-left: 2%;
	}

	.tools {
		position: relative;
	}

	.el-button--text {
		padding: 7px 5px;
	}

	.el-button.is-disabled,
	.el-button.is-disabled:hover {
		border: none !important;
	}

	
</style>
